<template>
    <div data-page="swHomeWaterPressureView" id="swHomeWaterPressureView">
        <div class="sw-card">
            <div class="sw-card__head">
                <div class="sw-card__title">水管网压力</div>
                <div class="sw-card__desc">报警 <span id="swWaterAlarmNum">0</span></div>
            </div>
            <div class="sw-card__body" style="display: block;">
                <div class="swiper-container" id="swHomeWaterPressureSwiper">
                    <div class="swiper-wrapper" id="swHomeWaterPressure">
                        <!-- <div class="sw-chart swiper-slide">
                            <div class="sw-chart__desc">
                                <div class="sw-chart__value"><span>0.2</span> Mpa</div>
                                <div class="sw-chart__name">某某某压力传感器压力传感器</div>
                            </div>
                            <div class="sw-chart__wrap"></div>
                        </div> -->
                    </div>
                    <div class="swiper-pagination" id="swHomeWaterPressureSwiperPager" style="bottom: 0!important;"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped></style>
<script>
    return {
        data: function () {
            return {
            }
        },
        methods: {
            getData: function () {
                var self = this
                Dao.getAttentionFacsStatusSw({
                    queryType: 0,
                    orgIds: single_Orgid_wbdw,
                    code: 'waterGage'
                }, function (data) {
                    // debugger
                    // data = [
                    //     { name: '设备名称1', id: 1, value: 0.1, unit: 'MPa' },
                    //     { name: '设备名称2', id: 2, value: 0.2, unit: 'MPa' },
                    //     { name: '设备名称3', id: 3, value: 0.3, unit: 'MPa' }
                    // ]
                    self.removeAllSlides()
                    if (data && data.resultList.length > 0) {
                        jQuery('#swWaterAlarmNum').text(data.alarmCount)
                        jQuery('#swHomeWaterPressureView').show()
                        for (var i = 0; i < data.resultList.length; i++) {
                            var o = data.resultList[i]
                            for (var j = 0; j < o.analogInfo.length; j++) {
                                self.addChart(o, o.analogInfo[j])
                            }
                        }
                        self.bindRouteEvents()
                        //滑块只展示3个
                        let swaiperList = jQuery("#swHomeWaterPressureSwiperPager").children();
                        // if (swaiperList.length > 3) {
                        //     let saveList = jQuery("#swHomeWaterPressureSwiperPager .swiper-pagination-bullet").slice(0, 3);
                        //     jQuery("#swHomeWaterPressureSwiperPager").empty().append(saveList);
                        // }
                        if (swaiperList.length == 1) {
                            jQuery("#swHomeWaterPressureSwiperPager").hide()
                        } else if (swaiperList.length > 1) {
                            jQuery("#swHomeWaterPressureSwiperPager").show()
                        }
                            
                    } else {
                        jQuery('#swWaterAlarmNum').text(0)
                        jQuery('#swHomeWaterPressureView').hide()
                    }
                });
            },
            addChart(o, info) {
                var self = this
                var fontClassMap = {
                    "0": "color-3",
                    "10": "color-1",
                    "20": "color-2",
                    "30": "color-5",
                    "40": "color-8",
                };
                info.realTimeAnalogInfo = info.realTimeAnalogInfo || {
                    analogValue: 0,
                    analogUnits: ''
                }
                if(o.hasAnalog!=0){
                    var html = `<div class="swiper-slide" data-id="${o.id}"><div class="sw-chart">
                        <div class="sw-chart__desc">
                            <div class="sw-chart__value">
                                <span class="${fontClassMap[o.fireTType || 0]}">${info.realTimeAnalogInfo.analogValue.toFixed(2)}</span>
                                ${info.realTimeAnalogInfo.analogUnits}
                            </div>
                            <div class="sw-chart__name">${o.name}</div>
                        </div>
                        <div class="sw-chart__wrap" id="swWaterPressureGauge${o.id}${info.dataTypeId}"></div>
                    </div></div>`
                    $("#swHomeWaterPressure").append(html);
                    self.drawClockChart(o.id, info)
                }else{
                    var html = `<div class="swiper-slide" data-id="${o.id}"><div class="sw-chart">
                        <div class="sw-chart__desc">
                            <div class="sw-chart__value">
                                <span class="${fontClassMap[o.fireTType || 0]}">${o.fireTTypeStatusInfo.statusAlias}</span>
                            </div>
                            <div class="sw-chart__name">${o.name}</div>
                        </div>
                        <div class="sw-chart__wrap" id="swWaterPressureGauge${o.id}${info.dataTypeId}">
                            <img src="${o.fireTTypeStatusInfo.statusPic}?imageView2/1/w/100/h/100" style="margin:10px 0 0 10px;width:100px;height:100px;">
                        </div>
                    </div></div>`
                    $("#swHomeWaterPressure").append(html);
                }
                
                var swiper = app.swiper.get('#swHomeWaterPressureSwiper');
                swiper.update(true); // 更新滑块
            },
            bindRouteEvents() {
                jQuery('#swHomeWaterPressure .swiper-slide').off().click(function (e) {
                    var ctarget=e.currentTarget
                    app.router.navigate(`/eqmentMsg/` + ctarget.getAttribute('data-id') + `/`);
                })
            },
            removeAllSlides() {
                var swiper = app.swiper.get('#swHomeWaterPressureSwiper');
                swiper && swiper.removeAllSlides();
                swiper && swiper.update();
            },
            initSwiper: function () {
                var mySwiper = new Swiper('#swHomeWaterPressureSwiper', {
                    pagination: {
                        el: '#swHomeWaterPressureSwiperPager',
                        dynamicBullets: true,
                    },
                });
            },
            drawClockChart: function (bizId, info) {
                var self = this;
                var dataTypeId = info.dataTypeId
                var dataTypeName = info.dataTypeName
                var currentAnalogValue = info.realTimeAnalogInfo.analogValue
                var currentAnalogUnits = info.realTimeAnalogInfo.analogUnits
                var _score = currentAnalogValue;
                var myChart = echarts.init(document.getElementById(`swWaterPressureGauge${bizId}${dataTypeId}`));
                var myOption = {
                    tooltip: null,
                    series: [{
                        type: 'gauge',
                        min: 0,
                        max: 2.5,
                        radius: "85%",
                        center: ["50%", "52%"],
                        splitNumber: 5,
                        //仪表盘标题。
                        title: {
                            show: true,
                            textStyle: {
                                fontSize: 15
                            }
                        },
                        axisLabel: { //文字样式（及“10”、“20”等文字样式）
                            distance: 5, //文字离表盘的距离
                            fontSize: 12,
                        },
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#000']
                                ],
                                shadowBlur: 2,
                                width: 8,
                                shadowColor: '#000', //默认透明
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 5,
                            length: 14,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        splitLine: { //分割线样式（及10、20等长线样式）
                            length: 18,
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        pointer: {
                            length: '60%',
                            width: '3',
                        },
                        detail: {
                            formatter: currentAnalogUnits,
                            textStyle: {
                                fontSize: 12
                            },
                            offsetCenter: [0, "65%"],
                        },
                        data: [{
                            value: _score,
                            name: '',
                        }]
                    }]
                };
                myChart.setOption(myOption, true);
            },
        },
        on: {
            pageAfterIn: function (e, page) {
                var self = this;
                this.initSwiper()
                self.getData();
            }
        }
    }
</script>